<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">字符统计</h2>
      </div>
      <div class="row">
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输入文本：</label>
            <div class="form-field">
              <textarea
                class="form-textarea json-input" rows="4"
                v-model="inputData"
                @change="handleCount"
                @keyup="handleCount"
              ></textarea>
            </div>
          </div>
        </div>
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">统计结果：</label>
            <div class="form-field form-box json-input">
              <div class="cell-text text-theme mt-sm">字符：{{countTotal}}</div>
              <div class="cell-text text-theme mt-sm">字母：{{countLetter}}</div>
              <div class="cell-text text-theme mt-sm">数字：{{countNumber}}</div>
              <div class="cell-text text-theme mt-sm">中文：{{countChiness}}</div>
              <div class="cell-text text-theme mt-sm">标点符号：{{countSymbol}}</div>
              <div class="cell-text text-theme mt-sm">空格：{{countSpace}}</div>
            </div>
          </div>
        </div>
        <div class="row-cell clear pt-sm mb-sm">
          <div class="pull-right">
            <Pipe :operation="{inputData: inputData}" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pipe from '../index/pipe.vue'

/* 大小写转换 */
export default {
  components: {
    Pipe
  },

  data () {
    return {
      inputData: '',
      outputData: '',
      isPipe: false,
      countTotal: 0,
      countLetter: 0,
      countNumber: 0,
      countChiness: 0,
      countSymbol: 0,
      countSpace: 0
    }
  },

  methods: {
    /**
     * @function 计算
    */
    handleCount () {
      let str = this.inputData || ''
      // 总数
      this.countTotal = str.length
      // 字符数组
      let list = str.split('')
      // 字母
      let countLetter = 0
      // 数字
      let countNumber = 0
      // 中文
      let countChiness = 0
      // 标点符号
      let countSymbol = 0
      // 空格
      let countSpace = 0
      list.forEach(item => {
        if (/[a-zA-Z]/.test(item)) {
          countLetter += 1
        }
        else if (/\d/.test(item)) {
          countNumber += 1
        }
        else if (/[\u4E00-\u9FA5]/.test(item)) {
          countChiness += 1
        }
        else if (/\s/.test(item)) {
          countSpace += 1
        }
        else {
          countSymbol += 1
        }
      })
      // 字母总数
      this.countLetter = countLetter
      // 数字总数
      this.countNumber = countNumber
      // 中文总数
      this.countChiness = countChiness
      // 标点符号
      this.countSymbol = countSymbol
      // 空格
      this.countSpace = countSpace
    }
  },

  mounted () {
    // 管道数据
    if (this.$store.state.inputData) {
      this.inputData = this.$store.state.inputData
      this.$store.state.inputData = ''
    }
    // 初始化
    this.handleCount()
  }
}
</script>

<style lang="less">
.json-input{
  height: 450px;
}
</style>
